<template>
  <div>
    <div class="gva-search-box">
      <el-form ref="searchForm" :inline="true" :model="searchInfo">
        <el-form-item label="店铺类型">
          <el-select v-model="searchInfo.category_id" placeholder="请选择店铺类型" :filterable="true">
            <el-option
              v-for="item in selectOption"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="店铺名称">
          <el-input v-model="searchInfo.shop_name" placeholder="店铺名称" />
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input v-model="searchInfo.user_phone" placeholder="联系电话" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="search" @click="onSubmit">查询</el-button>
          <el-button icon="refresh" @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="gva-table-box">
      <el-table :data="tableData" row-key="id">
        <el-table-column align="left" label="店铺ID" min-width="150" prop="id" />
        <el-table-column align="left" label="店铺门面" min-width="150">
          <template #default="scope">
            <div v-if="scope.row.company_img">
              <img :src="scope.row.company_img" alt class="avatar" />
            </div>
          </template>
        </el-table-column>
        <el-table-column align="left" label="店铺名称" min-width="150" prop="shop_name" />
        <el-table-column align="left" label="店铺地址" min-width="150" prop="address" />
        <el-table-column align="left" label="商家姓名" min-width="150" prop="user_name" />
        <el-table-column align="left" label="联系电话" min-width="150" prop="user_phone" />
        <el-table-column align="left" label="店铺类型" min-width="150" prop="category_id">
          <template #default="scope">
            <span>{{ displayCategoryName(scope.row.category_id) }}</span>
          </template>
        </el-table-column>
        <el-table-column align="left" label="店铺介绍" min-width="150" prop="desc" />
        <el-table-column align="left" label="关注人数" min-width="150" prop="follow_count" />
        <el-table-column align="left" label="评论数量" min-width="150" prop="comment_count" />
        <el-table-column align="left" label="入驻费用" min-width="150" prop="entry_fee" />
        <el-table-column align="left" label="入驻时间" min-width="150" prop="created_at" />
        <el-table-column align="left" label="营业状态" min-width="150">
          <template #default="scope">
            <span>{{ displayState(scope.row.business_status) }}</span>
          </template>
        </el-table-column>
        <el-table-column align="left" label="操作" min-width="150">
          <template #default="scope">
            <el-button @click="fnScanList(scope.row)">查看店铺商品</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="gva-pagination">
        <el-pagination
          :current-page="page"
          :page-size="page_size"
          :page-sizes="[10, 30, 50, 100]"
          :total="totals"
          layout="total, sizes, prev, pager, next, jumper"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        />
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, computed } from "vue";
import { shopList } from "@/api/api";
import { categoryList } from "@/api/platform";
import { useRouter } from "vue-router";

const router = useRouter();
let searchInfo = ref({
  category_id: "",
  shop_name: "",
  user_phone: ""
});
let tableData = ref([]);
let totals = ref(0);
let page = ref(1);
let page_size = ref(10);
let selectOption = ref([]);
const displayState = computed(() => {
  return val => {
    console.log(val);
    if (val === 0) {
      return "正常营业";
    } else {
      return "证件已过期";
    }
  };
});
const displayCategoryName = computed(() => {
  return val => {
    let temp = selectOption.value.filter(item => item.id === val);
    if (temp && temp.length) {
      return temp[0].name;
    } else {
      return "-";
    }
  };
});
onMounted(() => {
  getPlatformList();
  getList();
});
const fnScanList = row => {
  console.log(row);
  router.push({
    name: "carouselGoodsList",
    query: {
      shopId: row.id ? row.id : ""
    }
  });
};
const onSubmit = () => {
  page.value = 1;
  page_size.value = 10;
  getList();
};
const getList = () => {
  let params = {
    page: page.value,
    page_size: page_size.value,
    category_id: searchInfo.value.category_id
      ? Number(searchInfo.value.category_id)
      : undefined,
    user_phone: searchInfo.value.user_phone
      ? Number(searchInfo.value.user_phone)
      : undefined,
    shop_name: searchInfo.value.shop_name
  };
  shopList(params).then(response => {
    if (response.code === 0) {
      tableData.value = response.data.list || [];
      totals.value = response.data.total || 0;
      let temp = tableData.value.map(item => {
        if (item.status === 1) {
          item.status = true;
        } else {
          item.status = false;
        }
        return item;
      });
      tableData.value = temp;
    }
  });
};
const handleCurrentChange = val => {
  page.value = val;
  getList();
};
const handleSizeChange = val => {
  page_size.value = val;
  getList();
};
const onReset = () => {
  searchInfo.value = {
    category_id: "",
    shop_name: "",
    user_phone: ""
  };
  page.value = 1;
  page_size.value = 10;
  totals.value = 0;
  getList();
};
const getPlatformList = () => {
  let params = {
    page: 1,
    page_size: 1000
    // page_size: page_size_p.value
  };
  categoryList(params).then(response => {
    if (response.code === 0) {
      selectOption.value = response.data.list || [];
    }
  });
};
</script>
<style lang="scss" scoped>
.avatar {
  width: 100%;
  height: 90px;
  margin-right: 10px;
  object-fit: contain;
}
</style>
